@charset "utf-8";

*{
    padding: 0;
    margin: 0;
}
.disp{
    display: block !important;
}
.dis{
    display: none !important;
}
body{
    background-color: #fff;
    background-image: url(../../imgs/body-bgimg.png);
    background-position: top;
    background-repeat: repeat;
}
.root{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // 头部
    header{
        width: 100%;
        >.wrapper{
            margin: 0 auto;
            max-width: 894px;
            min-width: 800px;
            height: 78px;
            position: relative;
            >a{
                text-decoration: none;
                color: #7f7f7f;
                float: right;
                line-height: 78px;
            }
            >.lang{
                color: #7f7f7f;
                margin-left: 27px;
                float: right;
                line-height: 78px;
                cursor: pointer;
                >.langlist{
                    position: absolute;
                    right: 0;
                    top: 50px;
                    background: #fff;
                    border-radius: .13889rem;
                    box-shadow: 0 0 0.13889rem #d3d3d3;
                    width: 110px;
                    height: 150px;
                    >div{
                        text-align: center;
                        line-height: 40px;
                        color: #7f7f7f;
                        font-size: .38889rem;
                        cursor: pointer;
                        transition: opacity .34s cubic-bezier(0,0,.2,1) 0s;
                        padding: 5px 20px;
                        &:hover{
                            background-color: #ccc;
                        }
                    }
                }
            &::after{
                content: "";
                height: 0;
                width: 0;
                border: 5px solid transparent;
                border-top-color: #7f7f7f;
                margin-left: 10px;
                margin-bottom: -2px;
                display: inline-block;
                }
            }
        } 
    }

    // 主体部分
    main{
        flex: 1 1 auto;
        >.wrapper{
            margin: 0 auto;
            padding-bottom: 24px;
            max-width: 894px;
            min-width: 800px;
            padding-top: 45px;
            >.inner{
                width: 380px;
                margin: 82px auto 0;
                background: #fff;
                border-radius: 8px;
                >.main-1{
                    padding: 40px;
                    position: relative;
                    >h1{
                        padding: 10px 0 30px;
                        margin: 0;
                        font-size: 26px;
                        line-height: 37px;
                        font-weight: 500;
                        text-align: center;
                    }
                    >div:nth-child(2){
                        position: absolute;
                        top:0;
                        right: 0;
                        display: flex;
                        cursor: pointer;
                        >div{
                            text-align: center;
                            background-image: url(../../imgs/saomalogin.png);
                            background-repeat: repeat-x;
                            background-position: 50%;
                            background-size: 100% 100%;
                            margin: 0 12px;
                            color: #7f7f7f;
                            font-size: 12px;
                            height: 23px;
                            line-height: 23px;
                            position: relative;
                            &::before{
                                content: "";
                                width: 12px;
                                height: 23px;
                                position: absolute;
                                top: 0;
                                left: -12px;
                                background-repeat: no-repeat;
                                background-size: 100% 100%;
                                background-image: url(../../imgs/saomaL.png);
                                background-position: 0;
                            }
                            &::after{
                                content: "";
                                width: 12px;
                                height: 23px;
                                position: absolute;
                                top: 0;
                                right: -12px;
                                background-repeat: no-repeat;
                                background-size: 100% 100%;
                                background-image: url(../../imgs/saomaR.png);
                                background-position: 0;
                            }
                        }
                    }
                    >div:nth-child(3){
                        display: flex;
                        margin-bottom: 20px;
                        align-items: center;
                        >div{
                            height: 34px;
                            line-height: 34px;
                            cursor: pointer;
                            padding: 0 10px;
                            flex: 1 1;
                            text-align: center;
                        }
                        >div:first-child{
                            border-right: 1px solid #ccc;
                        }
                    }

                    >.phone-login{
                        >div:first-child{
                            width: 100%;
                            height: 45px;
                            margin-bottom: 10px;
                            >input{
                            width: calc(100% - 30px);
                            border-radius: 9px;
                            padding: 10px 15px;
                            line-height: 25px;
                            border: 0;
                            outline:none;
                            background-color:#f7f7f7 ;
                            font-size: 12px;
                            }
                        }
                        >div:last-child{
                            display: flex;
                            justify-content: space-between;
                            height: 45px;
                            align-items: center;
                            margin-bottom: 10px;
                            >div{
                            flex: 1;
                                >input{
                                width: calc(100% - 30px);
                                border-radius: 9px;
                                padding: 10px 15px;
                                line-height: 25px;
                                border: 0;
                                outline:none;
                                background-color:#f7f7f7 ;
                                font-size: 12px;
                                }
                            }
                            >button{
                            font-size: 12px;
                            margin-left: 9px;
                            white-space: nowrap;
                            min-width: 90px;
                            height: 45px;
                            padding: 0 8px;
                            border: 0;
                            outline: none;
                            border-radius: 9px;
                            color: #fff;
                            background-color: rgba(0,0,0,.15);
                            }
                        }
                        
                    }

                    >.code-login{
                        >div:first-child{
                            width: 100%;
                            height: 45px;
                            margin-bottom: 10px;
                            >input{
                                width: calc(100% - 30px);
                                border-radius: 9px;
                                padding: 10px 15px;
                                line-height: 25px;
                                border: 0;
                                outline:none;
                                background-color:#f7f7f7 ;
                                font-size: 12px;
                            }
                        }
                        >div:nth-child(2){
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            height: 45px;
                            margin-bottom: 10px;
                            background-color:#f7f7f7 ;
                            border-radius: 9px;
                            position: relative;
                            >input{
                                width: calc(100% - 30px);
                                padding: 10px 15px;
                                line-height: 25px;
                                border: 0;
                                outline:none;
                                background: transparent;
                                font-size: 12px;
                            }
                            >.eyeJ{
                                padding-right: 11px;
                                width: 24px;
                                height: 24px;
                                cursor: pointer;
                            }
                            >.eyedisJ{
                                position: absolute;
                                top: 10.5px;
                                right: 11px;
                                width: 24px;
                                height: 24px;
                                cursor: pointer;
                            }                            
                        }
                        >a{
                            text-decoration: none;
                            color: rgba(0,0,0,.6);
                            margin: 0 3px;
                            transition: opacity .34s cubic-bezier(0,0,.2,1) 0s;
                            &:hover{
                                opacity: 0.4;
                            }
                        }
                    }
                    
                    >button{
                        margin-top: 27px;
                        background-color: #2ad181;
                        opacity: .3;
                        color: #fff;
                        border: 0;
                        outline: none;
                        width: 100%;
                        height: 48px;
                        border-radius: 9px;
                        font-size: 15px;
                    }
                    >div:nth-child(7){
                        margin-bottom: 36px;
                        padding-top: 9px;
                        display: flex;
                        justify-content: space-between;
                        >a:first-child{
                            color: rgba(0,0,0,.6);
                            font-size: 12px;
                            transition: opacity .34s ;
                            text-decoration: none;
                            &:hover{
                                opacity: 0.4;
                            }
                        }
                        >a:last-child{
                            text-decoration: none;
                            color: #2ad181;
                            font-size: 12px;
                            transition: opacity .34s ;
                            &:hover{
                                opacity: 0.4;
                            }
                        }
                    }
                    >div:nth-child(8){
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 12px;
                        >div{
                            border-top: 1px solid rgba(0,0,0,.08);
                            flex: 1 1;
                        }
                        >span{
                            font-size: 12px;
                            color: rgba(0,0,0,.6);
                            line-height: 14px;
                            padding: 0 21px;
                        }
                    }
                    >div:nth-child(9){
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        >img{
                        width: 28px;
                        height: 28px;
                        margin: 0 11px;
                        }
                    }
                    
                }
                >.sao-login{
                    padding: 40px;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    >h1{
                        padding: 10px 0 30px;
                        margin: 0;
                        font-size: 26px;
                        line-height: 37px;
                        font-weight: 500;
                        text-align: center;
                    }
                    >div:nth-child(2){
                        position: absolute;
                        top:0;
                        right: 0;
                        display: flex;
                        cursor: pointer;
                        >div{
                            text-align: center;
                            background-image: url(../../imgs/saomalogin.png);
                            background-repeat: repeat-x;
                            background-position: 50%;
                            background-size: 100% 100%;
                            margin: 0 12px;
                            color: #7f7f7f;
                            font-size: 12px;
                            height: 23px;
                            line-height: 23px;
                            position: relative;
                            &::before{
                                content: "";
                                width: 12px;
                                height: 23px;
                                position: absolute;
                                top: 0;
                                left: -12px;
                                background-repeat: no-repeat;
                                background-size: 100% 100%;
                                background-image: url(../../imgs/saomaL.png);
                                background-position: 0;
                            }
                            &::after{
                                content: "";
                                width: 12px;
                                height: 23px;
                                position: absolute;
                                top: 0;
                                right: -12px;
                                background-repeat: no-repeat;
                                background-size: 100% 100%;
                                background-image: url(../../imgs/saomaR.png);
                                background-position: 0;
                            }
                        }
                    }
                    >div:nth-child(3){
                        width: 180px;
                        height: 180px;
                        margin: 0 auto 20px;
                        border-radius: 9px;
                        border: 1px solid #807878;
                        overflow: hidden;
                        >img{
                            width: 100%;
                            height: 100%;
                        }                       
                    }
                    >div:nth-child(4){
                        width: 180px;
                        height: 180px;
                        margin: 0 auto 20px;
                        background-repeat: no-repeat;
                        background-position: 50%;
                        background-size: 100% 100%;
                        position: relative;
                        left: 15px;
                        >img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    >p:last-child{
                        color: rgba(0,0,0,.7);
                        font-size: 14px;
                        font-weight: 500;
                        text-align: center;                        
                    }
                }
            }
            
        }
    }

    // 尾部
    footer{
        >.wrapper{
            margin: 0 auto;
            padding: 20px;
            >p{
                text-align: center;
                user-select: none;
                color: #9b9b9b;
            }
        }
    }
}